<!--
 * @Author: wangshuguang
 * @Date: 2022-03-29 11:21:16
 * @LastEditTime: 2022-03-29 13:11:19
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="memberLineChrars">
     <lineChars :options="lineChrarsOption"/>
  </div>
</template>

<script>
import lineChars from "@/components/chars.vue";
export default {
  components:{
    lineChars
  },
  props:{
    baseData:{}
  },
  data(){
    return{
      lineChrarsOption:{},
    }
  },
  watch:{
    baseData:{
      handler(){
        this.initChars()
      },
      immediate: true
    }
  },
  methods:{
    initChars(){
      console.log('baseData',this.baseData)
      let xData = this.baseData.map(v => v.lineDate)
      let yData = this.baseData.map(v => v.lineAmount)
      this.lineChrarsOption = {
        title: {
          text: 'Stacked Line'
        },
        grid:{
          bottom: '40%'
        },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {  
            interval:0,  
            rotate:-70  
          },  
          boundaryGap: ['20%', '20%'],
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            color:['#FFB72F'],
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: yData
          },
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.memberLineChrars{
  height: 800px;
}
</style>